import React, { useState, useEffect, useRef } from 'react';
import './frame.css'

interface ChildProps {
    title: string;//标题
    img: string,//图片路径
    num: number,//数量
    unit: string,//计量单位
    cont: number
}
const Statis: React.FC<ChildProps> = ({ title, img, num, unit, cont }) => {

    return (
        <>
            <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: '1px solid rgb(240,240,240)', width: '382px', height: '100%', padding: '30px', fontSize: '18px' }}>
                <p style={{ color: 'rgb(178,178,178)' }}>{title}</p>
                <p><span style={{ display: 'inline-block', fontSize: '40px', minWidth: '120px' }}>{num}</span><span>{unit}</span></p>
                {cont > 0 ?
                    <p>较昨日增加{cont}{unit}<img src="/wjimgs/up.png" style={{ width: '25px', height: '20px', marginLeft: '20px' }} /></p>
                    :
                    <p>较昨日减少{cont * -1}{unit}<img src="/wjimgs/dwon.png" style={{ width: '16px', height: '12px', marginLeft: '20px' }} /></p>}
                <p><a>查看详情</a></p>
                <img style={{ right: '30px', position: 'absolute', width: '40px', height: '40px' }} src={img} />
            </div>

        </>
    );
}

export default Statis;